<template>
  <div class="app1">
    <div class="box">

    </div>
    <!--一个容器 , 来 显示用户的信息-->
    <div class="box1">
      <!--      展示用户的详细信息-->
      <div class="head">
        <!--        显示用户的头像-->
        <div class="head-img">
          <div class="acater">
            <el-avatar :size="120" :src="avatar"></el-avatar>
          </div>
        </div>
        <!--        显示用户的信息-->
        <div class="head-dsb">
          <p class="dsb-name">-- {{ name }}</p>
          <p class="dsb-id">ID {{ id }}</p>
        </div>
      </div>
      <div style="background-color: #efeff4;height: 20px">
      </div>
      <!--      修改个人资料-->
      <div class="mt-1">
        <!--        修改用户的信息-->
        <div class="ps-lt">
          <!--          修改头像-->
          <div class="lt-dsb" @click="updataimage">
            <p>
              修改头像
              <reimag ref="reImage"></reimag>
            </p>
            <i class="arr-right"></i>
          </div>
          <!--          修改昵称-->
          <div class="lt-dsb" @click="updataName">
            <p>
              修改昵称
              <reName ref="reName"></reName>
            </p>
            <i class="arr-right"></i>
          </div>
          <!--          修改密码-->
          <div class="lt-dsb" @click="updataPass">
            <p>
              修改密码
              <rePass ref="rePass"></rePass>
            </p>
            <i class="arr-right"></i>
          </div>
          <!--             退出登录-->
          <!--          <div class="lt-dsb">-->
          <!--            <p>-->
          <!--              &lt;!&ndash;              <exit></exit>&ndash;&gt;-->
          <!--            </p>-->
          <!--            <i class="arr-right"></i>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// // <!--引入修改头像的组件 (懒加载的方式)-->
import reimag from "./reImage";
import reName from "./reName";
import rePass from "./rePassword";

import {mapGetters} from 'vuex'

export default {
  //注册组件
  components: {
    reimag,
    reName,
    rePass,
    // exit
  },
  name: "Person",
  methods: {
    updataName() {
      this.$refs.reName.open()
    },
    updataPass() {
      this.$refs.rePass.open()
    },
    updataimage() {
      this.$refs.reImage.open()
    }
  },
  //计算属性 , 监控变化
  computed: {
    //当前登录的用户对象
    ...mapGetters(['id', 'name', 'avatar']),
  },
  mounted: function () {
    //初始化WebSocket对象
    this.$store
      .dispatch("user/initWebSocket")


    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    this.$store
      .dispatch("user/getFriends")
      .then(() => {
        console.log("朋友列表 , 展示成功");
      })
      .catch((error) => {
        console.log("用户的朋友列表 , 展示失败 , 登录错误" + error);
      })
  }
}
</script>

<style scoped>

h4 {
  line-height: 50px;
  height: 50px;
  border-bottom: 1px solid #b0b0b0;

}

.box {
  padding-bottom: 50px;
}

.box1 {
  height: 500px;
  width: 600px;
  margin: 0 auto;
  box-shadow: 1px 5px 15px 15px rgba(160, 160, 180, 0.1);

}

.head {
  height: 220px;
  background-image: url(img/25.png);
}


.head-img {
  float: left;
  width: 200px;
  height: 100%;
}

.acater {
  padding-top: 54px;
  padding-left: 60px;
}

.head-dsb {
  float: left;
  height: 100%;
  width: 400px
}

.head-dsb p {
  font-size: 25px;
  color: #fff;
  text-align: left;
  padding-left: 45px;
}

.dsb-name {
  margin-top: 80px;
  padding-bottom: 10px;
}

.mt-1 {
  width: 90%;
  margin: 0 auto;
  height: 260px;
}

/*修改用户的信息*/
.ps-lt {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.lt-dsb:hover {
  background-color: #b0b0b0;
}

.lt-dsb {
  height: 64px;
  line-height: 20px;
  border-bottom: 1px solid #e5e5e5;
}

/*修改字体*/
.lt-dsb p {
  float: left;
  text-align: left;
  margin-left: 50px;
  font-size: 20px;
  color: #838383;
}

.arr-right {
  float: right;
  width: 50px;
  height: 100%;
  background-image: url(img/arr-right.png);
  /*图片只显示一张*/
  background-repeat: no-repeat;
  /*使图片居中显示*/
  background-position: center;
  background-size: 15px 22px;
}
</style>
